<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <div>
                <el-button type="primary"  @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    备份当前官网
                </el-button>
            </div>
            <el-table ref="tableRef" class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="id" prop="id" min-width="100" />
                <el-table-column label="备份名称" prop="backup_file" min-width="150"/> 
                <el-table-column label="备份时间" prop="backup_time" min-width="150"/>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="hf(row.id)">
                            恢复
                        </el-button>
                        <el-button type="danger" link @click="handleDelete(row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { usePaging } from '@/hooks/usenew'
import feedback from '@/utils/feedback'
import { createBackup, listBackups, restoreBackup,deleteBackup } from '@/api/application/website/website'
const handleAdd = async() => {
    feedback.loading('备份中')
    try {
        await createBackup({})
        feedback.closeLoading();
    } catch (error) {
        feedback.closeLoading();
    }
    getLists()
}
const formData = ref({

})
const hf = async(id:any) =>{
    await feedback.confirm('确定要恢复？')
    await restoreBackup({id:id})
    getLists()
}
const handleDelete = async(id:any) =>{
    await feedback.confirm('确定要删除？')
    await deleteBackup({id:id})
    getLists()
}
const { pager, getLists } = usePaging({
    fetchFun: listBackups,
    params: formData
})
getLists()
</script>
